import React from 'react';

export type CardVariant = 'glassmorphic-light' | 'glassmorphic-dark' | 'solid-light' | 'solid-dark';

interface CardProps {
  variant?: CardVariant;
  children: React.ReactNode;
  className?: string;
}

export function Card({ variant = 'glassmorphic-dark', children, className = '' }: CardProps) {
  const baseStyles = "rounded-[12px] transition-all duration-200";
  
  const variantStyles = {
    'glassmorphic-light': "backdrop-blur-[14.374px] bg-[rgba(255,255,255,0.06)]",
    'glassmorphic-dark': "backdrop-blur-[14.374px] bg-[rgba(6,6,6,0.03)]",
    'solid-light': "bg-[#faf1e9]",
    'solid-dark': "bg-[#2c2c2c]",
  };
  
  return (
    <div className={`${baseStyles} ${variantStyles[variant]} ${className}`}>
      {children}
    </div>
  );
}

interface FeatureCardProps {
  badge: string;
  description: string;
  className?: string;
}

export function FeatureCard({ badge, description, className = '' }: FeatureCardProps) {
  return (
    <Card variant="glassmorphic-dark" className={`px-[40px] py-[38px] w-[471px] h-[207px] flex flex-col gap-[26px] ${className}`}>
      <div className="bg-[#2c2c2c] text-[#faf1e9] font-['Geist_Mono'] text-[12px] tracking-[1.56px] uppercase px-[10px] py-[4px] rounded-[4px] w-fit">
        {badge}
      </div>
      <p className="font-['Geist'] text-[16px] leading-[21px] text-[#060606]">
        {description}
      </p>
    </Card>
  );
}

interface PricingCardProps {
  plan: string;
  price: string;
  badge?: string;
  features: string[];
  buttonText: string;
  variant?: 'dark' | 'light';
  isPopular?: boolean;
  className?: string;
}

export function PricingCard({ 
  plan, 
  price, 
  badge, 
  features, 
  buttonText, 
  variant = 'dark',
  isPopular = false,
  className = '' 
}: PricingCardProps) {
  const bgColor = variant === 'dark' ? 'from-[#2c2c2c] to-[#2c2c2c]' : 'from-[#edc29c] to-[#edc29c]';
  const textColor = variant === 'dark' ? 'text-[#faf1e9]' : 'text-[#2c2c2c]';
  const borderColor = isPopular ? 'border border-white' : '';
  
  return (
    <div className={`backdrop-blur-[500px] bg-gradient-to-r ${bgColor} ${borderColor} rounded-[16px] px-[32px] py-[32px] pb-[24px] w-[344px] flex flex-col justify-between relative ${className}`}>
      {isPopular && (
        <span className="absolute top-[40px] right-[32px] text-[12px] font-['Geist_Mono'] text-[#2c2c2c]">
          Popular
        </span>
      )}
      
      <div>
        {badge && (
          <div className={`backdrop-blur-[50px] border border-${variant === 'dark' ? '[#faf1e9]' : '[#2c2c2c]'} ${textColor} font-['Geist_Mono'] text-[11px] uppercase px-[5px] py-[2.5px] rounded-[4px] w-fit mb-[8px]`}>
            {badge}
          </div>
        )}
        
        <h3 className={`font-['Geist'] font-medium text-[36px] tracking-[-0.96px] ${textColor} mb-[4px]`}>
          {plan}
        </h3>
        <p className={`font-['Geist_Mono'] text-[20px] tracking-[1.2px] ${textColor} mb-[40px]`}>
          {price}
        </p>
        
        <div className="flex flex-col gap-[16px]">
          {features.map((feature, index) => (
            <div key={index} className="flex gap-[6px] items-center">
              <svg className="size-[12.8px]" fill="none" viewBox="0 0 13 13">
                <path 
                  d="M10.6654 3.33203L4.9987 8.9987L2.33203 6.33203" 
                  stroke={variant === 'dark' ? '#FAF1E9' : '#2C2C2C'} 
                  strokeWidth="1.06667" 
                  strokeLinecap="round" 
                  strokeLinejoin="round" 
                />
              </svg>
              <p className={`font-['Geist'] text-[18px] leading-[19.6px] ${textColor}`}>
                {feature}
              </p>
            </div>
          ))}
        </div>
      </div>
      
      <button className={`border border-${variant === 'dark' ? '[#faf1e9]' : '[#2c2c2c]'} ${textColor} font-['Geist_Mono'] font-medium px-[35px] py-[19px] rounded-[8px] w-full mt-[40px]`}>
        {buttonText}
      </button>
    </div>
  );
}